<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<c:set var="contestPath" value="<%=request.getContextPath()%>"></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>学生成绩</title>
<link rel="stylesheet" href="${contestPath }/static/css/foundation-datepicker.css"/>
<style type="text/css">
	.page-header, .page-header label, .page-header select, .page-header span{
		float: left;
	}
	.page-header{
		width: 100%;
		height: 40px;
		line-height: 29px;
	}
	#check{
		width: 40px;
		height: 30px;
	}
	#query input{
		width: 150px;
		height: 30px;
	}
</style>
<script src="${contestPath }/static/lib/foundation-datepicker.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	
	$('select[name="condition"]').change(function(){
		if($(this).children('option:selected').val() == 'date'){
			$('#query').html('<input name="D1" type="text" id="D1" />~<input name="D2" type="text" id="D2" />');
		}else{
			$('#query').html('<input name="query" type="text" id="inquiry" />');
		}
	});
	$(document).on('mousedown', '#D1, #D2',  function(){
		$( this ).fdatepicker({
			format: 'yyyy-mm-dd'
		});
	});
	
	$('#check').click(function(){
		var condition = $('select[name="condition"]').val();
		var query = '';
		if(condition != 'date'){
			query = $('#inquiry').val();
		}else{
			var D1 = $('#D1').val();
			var D2 = $('#D2').val();
			if(D1 != '' && D2 != ''){
				query = D1 + ',' + D2;
			}
		}
		
		if(query != ''){
			$.ajax({
				type: 'POST',
				url: '${contestPath}/teacher/getScore',
				data: {
					condition: condition,
					query: query
				},
				dataType: "json",
				success: function(data){
					if(data.success){
						var htmlString = '';
						$.each(data.resultList, function(index, item){
							htmlString += '<tr>';
							htmlString += '<td>' + item.userId + '</td>';
							htmlString += '<td>' + item.userName + '</td>';
							htmlString += '<td>' + item.subjectName + '</td>';
							htmlString += '<td>' + item.examTimeString + '</td>';
							htmlString += '<td>' + item.score + '</td>';
							htmlString += '<td><button title="管理成绩" class="btn btn-xs btn-info edit-subject">';
							htmlString += '<i class="ace-icon fa fa-pencil bigger-120"></i>';
							htmlString += '</button></td>';
							htmlString += '</tr>';
						});
						$('tbody').html(htmlString);
					}else{
						alert("没有找到");
					}
				}
			});
		}else{
			alert("请输入查询条件");
		}
	})
	
	$(document).on('click', '.edit-subject',  function(){
	});
})
</script>
</head>
<body>
<div class="page-content-area">
	<div class="page-header">
			<label>查询条件:</label>
			<select name="condition">
				<option value="sub">科目</option>
				<option value="id">学号</option>
				<option value="name">姓名</option>
				<option value="date">考试日期</option>
			</select>
			<span class="input-group">
				<span id="query">
				<input name="query" type="text" id="inquiry" class="form-control input-mask-product" />
				</span>
				<span id="check" class="input-group-addon">
					<i class="ui-icon ace-icon fa fa-search orange"></i>
				</span>
			</span>
	</div><!-- /.page-header -->
	<div class="row">
		<div class="col-xs-12">
		<!-- PAGE CONTENT BEGINS -->
			<table id="testListTable" class="table table-striped table-bordered table-hover">
				<thead>
					<tr>
					    <th width=150>学号</th>
					    <th width=150>姓名</th>
					    <th width=150>科目</th>
					    <th width=150>考试日期</th>
					    <th width=150>成绩</th>
					    <th width=150>操作</th>
                    </tr>
				</thead>

				<tbody>
                <c:forEach items="${scoreList }" var="score">
                    <tr>
                        <td>${score.userId }</td>
                        <td>${score.userName }</td>
                        <td>${score.subjectName }</td>
                        <td>${score.examTimeString }</td>
                        <td>${score.score }</td>
						<td>
							<button title="管理成绩" class="btn btn-xs btn-info edit-subject">
								<i class="ace-icon fa fa-pencil bigger-120"></i>
							</button>
						</td>
					</tr>
				</c:forEach>
				</tbody>
			</table>
			<div class="hr hr-18 dotted hr-double"></div>
		</div><!-- /.col -->
	</div><!-- /.row -->
</div><!-- /.page-content-area -->
</body>
</html>